<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Time Machine X</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA8FCDZv0GdTV1ZXaxaBQ9pBRH6THU0k9CytB-2g6AgNl34HzvrxQbdGrttcIE13LpePe6RXHrS05cmQ" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

var map = null;
var track_polyline = []; 
var photo_location=[]; 
var map_bound=new GLatLngBounds(new GLatLng(24.829067,121.537862), new GLatLng(24.961323,121.798882));
var imgs=[];
var imgsw=[]; 
var imgsh=[];
var imglinkers=[];
var titles=[]; 
var dess=[];
var htmls=[];
var nowtotal=0;
var nowTime=[];
var iconstart = new GIcon();
iconstart.image = "http://gps.wintec.tw/img/track_start.png";
iconstart.iconSize = new GSize(16, 16);
iconstart.iconAnchor = new GPoint(8, 8);
iconstart.infoWindowAnchor = new GPoint(8, 8);
var iconend = new GIcon();
iconend.image = "http://gps.wintec.tw/img/track_end.png";
iconend.iconSize = new GSize(16, 16);
iconend.iconAnchor = new GPoint(8, 8);
iconend.infoWindowAnchor = new GPoint(8, 8);
var iconpush = new GIcon();
iconpush.image = "http://gps.wintec.tw/img/push_to_log.png";
iconpush.iconSize = new GSize(16, 16);
iconpush.iconAnchor = new GPoint(8, 8);
iconpush.infoWindowAnchor = new GPoint(8, 8);
var iconcar = new GIcon();
iconcar.image = "http://gps.wintec.tw/img/bike_user.gif";
iconcar.iconSize = new GSize(36, 57);
iconcar.iconAnchor = new GPoint(18, 57);
iconcar.infoWindowAnchor = new GPoint(16, 16);
var nowPushTrack=[429,969,1370,1575,1595,1840,2018,2019,2238,2341,2680];
var Tracer_marker = null;
var nowTracerPoint=0;
var t2;
var PhotoCNT=0;
var Showphoto=[];
var PhotoMark=[];
var ShowPhotoMark=[];
var LastSownPHmarker=null;
var TimeOut=500;
var Run=true;
var RunNode=null;
var DateNode=null;
var TimeNode=null;
var SpeedNode=null;
var AltiNode=null;
var Photo_Timer=null;
var gpsLogs = []; // GPSLogg


function TextTraceControl() { }
TextTraceControl.prototype = new GControl();
TextTraceControl.prototype.initialize = function(map) {
    var container = document.createElement("div");
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    
    var row = document.createElement("tr");
    
    var Stopcell = document.createElement("td");
    Stopcell.title="Stop";     
    this.setTDStyle_(Stopcell);
    Stopcell.appendChild(document.createTextNode("Stop"));     
    GEvent.addDomListener(Stopcell, "mouseover", function()
    {
		Stopcell.style.backgroundColor = "#00ff00"; 
    });
    GEvent.addDomListener(Stopcell, "mouseout", function() 
    { 
  		Stopcell.style.backgroundColor = "white"; 
    });
    GEvent.addDomListener(Stopcell, "mousedown", function() 
    { 
  		Stopcell.style.backgroundColor = "#ff0000"; 
    });
    GEvent.addDomListener(Stopcell, "mouseup", function() 
    {  
        Stopcell.style.backgroundColor = "#00ff00"; 
    });
    GEvent.addDomListener(Stopcell, "click", function()
    {
        if(LastSownPHmarker!=null)
        {
            LastSownPHmarker.closeInfoWindow();
            LastSownPHmarker=null;
        }
        Run = false;
        clearTimeout(t2);
        Tracer_marker.hide();
        GETPhoto();
        if(RunNode!=null)
        {
       		RunNode.nodeValue="Run";
       		Runcell.title="Run";  
        }       
    });
    
    row.appendChild(Stopcell);  
    
    var Runcell = document.createElement("td");               
    this.setTDStyle_(Runcell);
    RunNode=document.createTextNode("Pause");        
    Runcell.appendChild(RunNode);
    GEvent.addDomListener(Runcell, "mouseover", function() 
    {
        Runcell.style.backgroundColor = "#00ff00";
        if(Run)        
            Runcell.title="Pause";          
        else
            Runcell.title="Run";             });
    GEvent.addDomListener(Runcell, "mouseout", function() {Runcell.style.backgroundColor = "white";});
    GEvent.addDomListener(Runcell, "mousedown", function() {Runcell.style.backgroundColor = "#ff0000";});
    GEvent.addDomListener(Runcell, "mouseup", function() {Runcell.style.backgroundColor = "#00ff00";});
    GEvent.addDomListener(Runcell, "click", function() 
    {
        if(Run) 
        {
            clearTimeout(t2);
            Run = false;
            RunNode.nodeValue="Run";
            Runcell.title="Run"; 
        }
        else
        { 
            if(nowTracerPoint >= nowtotal)
                nowTracerPoint=0;
            Tracer();
            Run = true;
            RunNode.nodeValue="Pause";
            Runcell.title="Pause"; 
        } 
    }); 
    
    row.appendChild(Runcell);        
    
    var Fastcell = document.createElement("td");                     
    Fastcell.title="Fast";     
    this.setTDStyle_(Fastcell);
    Fastcell.appendChild(document.createTextNode("Fast"));            
    GEvent.addDomListener(Fastcell, "mouseover", function() {Fastcell.style.backgroundColor = "#00ff00";});
    GEvent.addDomListener(Fastcell, "mouseout", function() {Fastcell.style.backgroundColor = "white";});
    GEvent.addDomListener(Fastcell, "mousedown", function() {Fastcell.style.backgroundColor = "#ff0000";});
    GEvent.addDomListener(Fastcell, "mouseup", function() {Fastcell.style.backgroundColor = "#00ff00";});
    GEvent.addDomListener(Fastcell, "click", function() 
    {
  		if(TimeOut > 150)
            TimeOut=TimeOut-50;
    });      
    
    row.appendChild(Fastcell);        
    var Slowcell = document.createElement("td"); 
    this.setTDStyle_(Slowcell);
    Slowcell.title="Slow"; 
    Slowcell.appendChild(document.createTextNode("Slow"));        
    GEvent.addDomListener(Slowcell, "mouseover", function(){Slowcell.style.backgroundColor = "#00ff00";});
    GEvent.addDomListener(Slowcell, "mouseout", function() {Slowcell.style.backgroundColor = "white";})     
        GEvent.addDomListener(Slowcell, "mousedown", function() {Slowcell.style.backgroundColor = "#ff0000";});
    GEvent.addDomListener(Slowcell, "mouseup", function() {Slowcell.style.backgroundColor = "#00ff00";         });
    GEvent.addDomListener(Slowcell, "click", function() 
    {
        if(TimeOut < 5000)
            TimeOut=TimeOut+50; 
    });
    
    
    row.appendChild(Slowcell); 
    tblBody.appendChild(row);
    tbl.appendChild(tblBody); 
    container.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "0");    
    tbl.setAttribute("cellspacing", "0");    
    tbl.setAttribute("cellpadding", "0");    
    
    map.getContainer().appendChild(container);
    return container; 
    
}

TextTraceControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 30)); }

TextTraceControl.prototype.setTDStyle_ = function(td) {
    //td.style.textDecoration = "underline";
    td.style.color = "#0000cc";
    td.style.backgroundColor = "white";
    td.style.font = "small Arial";
    td.style.font = "normal bolder small arial,serif";          
    td.style.border = "1px solid black";
    td.style.bordercolor = "#000000";
    td.style.color = "#0000cc";
    td.style.padding = "0px";
    td.style.margin = "0px";
    td.style.cellspacing = "0px";
    td.style.cellpadding = "0px";
    td.style.textAlign = "center";
    td.style.width = "4.8em";
    td.style.cursor = "pointer"; }               
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function InfoControl() { }
InfoControl.prototype = new GControl();
InfoControl.prototype.initialize = function(map) 
{
    var container = document.createElement("div");
    
    var DateDiv = document.createElement("div");
    DateDiv.title="Date";           
    this.setInfoStyle_(DateDiv);
    container.appendChild(DateDiv);
    DateNode=document.createTextNode("Date");        
    DateDiv.appendChild(DateNode);      
    
    var TimeDiv = document.createElement("div");
    TimeDiv.title="Time";                       
    this.setInfoStyle_(TimeDiv);
    container.appendChild(TimeDiv);
    TimeNode=document.createTextNode("Time");       
    TimeDiv.appendChild(TimeNode);      
    
    var SpeedDiv = document.createElement("div");
    SpeedDiv.title="Speed";       
    SpeedDiv.id="SPDDiv";
    this.setInfoStyle_(SpeedDiv);
    container.appendChild(SpeedDiv);
    SpeedNode=document.createTextNode("Speed");         
    SpeedDiv.appendChild(SpeedNode);
    
    var AltiDiv = document.createElement("div");
    AltiDiv.title="Alti";       
    this.setInfoStyle_(AltiDiv);
    container.appendChild(AltiDiv);
    AltiNode=document.createTextNode("Altitude");       
    AltiDiv.appendChild(AltiNode);  
    
    map.getContainer().appendChild(container);
    return container; 
}

InfoControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(70, 10)); }

InfoControl.prototype.setInfoStyle_ = function(Info) {
    Info.style.color = "#0000cc";
    //Info.style.backgroundColor = "yellow";
    Info.style.font = " italic bolder 16px arial,serif";
    //Info.style.border = "1px solid black";
    Info.style.border = "0px";
    Info.style.padding = "0px";
    Info.style.marginBottom = "0px";
    Info.style.textAlign = "left";
    //Info.style.width = "18em";
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 
function GetMap()
{
    if (GBrowserIsCompatible())
    {
        map = new GMap2(document.getElementById("myMap"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.addControl(new TextTraceControl());
        map.addControl(new InfoControl);
		  map.addMapType(G_PHYSICAL_MAP);
		  map.addMapType(G_SATELLITE_3D_MAP);
        map.setCenter(new GLatLng(24.895195,121.668372), map.getBoundsZoomLevel(map_bound));
		  map.setMapType(G_NORMAL_MAP);
        ChangeName();  
    }
    else 
    { 
        map = document.getElementById("mymap");
        map.innerHTML = ""; map.innerHTML = "Sorry, Your browser not support Google Maps"; 
    }         
}

function ShowPoly()
{
    map.addOverlay(createMarker(0,iconstart,"(Start Point)"));
    map.addOverlay(createMarker((nowtotal-1),iconend,"(End Point)"));
    map.addOverlay(new GPolyline(track_polyline,'#00ff00',5,1));
    ShowPush();
}
function REFF()
{         
    map.clearOverlays(); 
    ShowPoly();
    AddPhotoHtmlToMap(); 
    GETPhoto();      
    Tracer();             
}
function Tracer()
{
    if(Tracer_marker == null)
    {
        Tracer_marker = new GMarker(track_polyline[0], iconcar);
        GEvent.addListener(Tracer_marker, "click", function(overlay, point)
        {
        	  var temp_index=0;
        	  if(nowTracerPoint>1)
        	  	temp_index=nowTracerPoint-1;
        	  
            Tracer_marker.openInfoWindowHtml("<p align=\"left\">Latitude: "+track_polyline[temp_index].lat()+"<br>Longitude: "+track_polyline[temp_index].lng()+"<br>Time: "+nowTime[temp_index]+"<br></p>");
            if(Run)
            {
                clearTimeout(t2);
                Run = false;
                RunNode.nodeValue="Run";                                  
            }
            LastSownPHmarker=Tracer_marker;
        });
        map.addOverlay(Tracer_marker);
        Tracer_marker.hide();
    }                   
    
    Tracer_marker.setPoint(track_polyline[nowTracerPoint]); 
    Tracer_marker.show(); 
    var nowDT=gpsLogs[nowTracerPoint].date;   
    var strM="";
    var strD="";
    var strh="";
    var strm="";
    var strs="";
    
    if((nowDT.getMonth()+1)<10)
        strM="0"+(nowDT.getMonth()+1);
    else
        strM=(nowDT.getMonth()+1);
    
    if(nowDT.getDate()<10)
        strD="0"+nowDT.getDate();
    else
        strD=nowDT.getDate();
    
    if(nowDT.getHours()<10)
        strh="0"+nowDT.getHours();
    else
        strh=nowDT.getHours();
    
    if(nowDT.getMinutes()<10)
        strm="0"+nowDT.getMinutes();
    else
        strm=nowDT.getMinutes();
    
    if(nowDT.getSeconds()<10)
        strs="0"+nowDT.getSeconds();
    else
        strs=nowDT.getSeconds();                     
    
    DateNode.nodeValue= strM+"/"+strD+"/"+nowDT.getYear();   
    TimeNode.nodeValue= strh+":"+strm+":"+strs; 
    SpeedNode.nodeValue="Speed: "+new String(gpsLogs[nowTracerPoint].speed)+" km/h";
    var DivSpeed=document.getElementById("SPDDiv");
    if(gpsLogs[nowTracerPoint].speed < 20)              
        DivSpeed.style.color = "#0000ff";          
    else if(gpsLogs[nowTracerPoint].speed < 40)     
        DivSpeed.style.color = "#00ff00";           
    else if(gpsLogs[nowTracerPoint].speed < 60)           
        DivSpeed.style.color = "#005860";         
    else if(gpsLogs[nowTracerPoint].speed < 80)             
        DivSpeed.style.color = "#640000";                  
    else if(gpsLogs[nowTracerPoint].speed < 100)           
        DivSpeed.style.color = "#ff8800";         
    else if(gpsLogs[nowTracerPoint].speed < 120)           
        DivSpeed.style.color = "#ff0088";             
    else 
        DivSpeed.style.color = "#ff0000";
    
    AltiNode.nodeValue="Altitude: "+new String(gpsLogs[nowTracerPoint].altitude)+" m";
    
    if(LastSownPHmarker!=null)
    {
        LastSownPHmarker.closeInfoWindow();
        LastSownPHmarker=null;
    }
    var bound = map.getBounds();
    
    if (!bound.contains(track_polyline[nowTracerPoint])) 
    {
        map.panTo(track_polyline[nowTracerPoint]);
    }
    var bShowPhoto=checkPhoto();
    nowTracerPoint++;
    if(nowTracerPoint < nowtotal)
    {         
        if(bShowPhoto==true)
            t2 = setTimeout("Tracer()", 5000);
        else
            t2 = setTimeout("Tracer()", TimeOut);
    }
    else
    {
        GETPhoto();
        Tracer();
    }
}
function cal_distance(lat1,lon1,lat2,lon2)
{
    lat1=lat1* Math.PI / 180;
    lat2=lat2* Math.PI / 180;
    lon1=lon1* Math.PI / 180;
    lon2=lon2* Math.PI / 180;
    var d = Math.acos(Math.sin(lat1)*Math.sin(lat2) + Math.cos(lat1)*Math.cos(lat2) * Math.cos(lon2-lon1)) * 6378137;
    return d;
}
function cal_course(lat1, lon1, lat2, lon2) 
{
    lat1=lat1* Math.PI / 180;
    lat2=lat2* Math.PI / 180;
    var dLon = (lon2-lon1)* Math.PI / 180;
    var y = Math.sin(dLon) * Math.cos(lat2);
    var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
    var c= ((Math.atan2(y, x)*180/Math.PI)+360) % 360;  
    return c;
}
function checkPhoto()
{         
    if(Showphoto.length <= 0)
    {
        return false;
    }
    for (var i in Showphoto)
    {
        if((Showphoto[i].lat()==track_polyline[nowTracerPoint].lat())&&(Showphoto[i].lng()==track_polyline[nowTracerPoint].lng()))
        {
            GEvent.trigger(ShowPhotoMark[i],"dragend");
            LastSownPHmarker=ShowPhotoMark[i];
            Showphoto.splice(i,1);           
            ShowPhotoMark.splice(i,1);  
            return true; 
        }
        else 
        {
            var d_p2np=50000;
            var d_p2cp=cal_distance(Showphoto[i].lat(),Showphoto[i].lng(),track_polyline[nowTracerPoint].lat(),track_polyline[nowTracerPoint].lng());
            var d_cp2np=0;
            var c_p2np=0;
            var c_p2cp=0;
            var cp2np=0;       
            if((nowTracerPoint+1)<nowtotal)
            {       
                d_p2np=cal_distance(Showphoto[i].lat(),Showphoto[i].lng(),track_polyline[nowTracerPoint+1].lat(),track_polyline[nowTracerPoint+1].lng());           
                if(d_p2cp<50 && (d_p2cp<d_p2np))
                {
                    Tracer_marker.setPoint(Showphoto[i]); 
                    GEvent.trigger(ShowPhotoMark[i],"dragend");
                    LastSownPHmarker=ShowPhotoMark[i];
                    Showphoto.splice(i,1);           
                    ShowPhotoMark.splice(i,1);  
                    return true;          
                }
                d_cp2np=cal_distance(track_polyline[nowTracerPoint].lat(),track_polyline[nowTracerPoint].lng(),track_polyline[nowTracerPoint+1].lat(),track_polyline[nowTracerPoint+1].lng());
                c_p2cp=cal_course(Showphoto[i].lat(),Showphoto[i].lng(),track_polyline[nowTracerPoint].lat(),track_polyline[nowTracerPoint].lng());
                c_p2np=cal_course(Showphoto[i].lat(),Showphoto[i].lng(),track_polyline[nowTracerPoint+1].lat(),track_polyline[nowTracerPoint+1].lng());
                cp2np=cal_course(track_polyline[nowTracerPoint].lat(),track_polyline[nowTracerPoint].lng(),track_polyline[nowTracerPoint+1].lat(),track_polyline[nowTracerPoint+1].lng());
                var dec=cp2np-c_p2np;
                if(dec>180)
                    dec=360-dec;
                if(dec<-180)
                    dec=360+dec;
                if(dec<0)
                    dec=-dec;
                if((dec<10) && d_cp2np>d_p2cp && d_cp2np>d_p2np)
                {
                    Tracer_marker.setPoint(Showphoto[i]); 
                    GEvent.trigger(ShowPhotoMark[i],"dragend");
                    LastSownPHmarker=ShowPhotoMark[i];
                    Showphoto.splice(i,1);         
                    ShowPhotoMark.splice(i,1);
                    return true;
                }        
            }
            else
            {
                if(d_p2cp<50)
                {     
                    Tracer_marker.setPoint(Showphoto[i]); 
                    GEvent.trigger(ShowPhotoMark[i],"dragend");
                    LastSownPHmarker=ShowPhotoMark[i];
                    Showphoto.splice(i,1);
                    ShowPhotoMark.splice(i,1);    
                    return true;
                }     
            }     
        }
    }
    return false;  
}

function GETPhoto()
{
    nowTracerPoint = 0;         
    Showphoto=[];
    ShowPhotoMark=[];
    for (var i in photo_location)
    {
        Showphoto.push(photo_location[i]);
        ShowPhotoMark.push(PhotoMark[i]);
    }
    return;                    
}
function ShowPush()
{
    if(nowPushTrack.length==0)
        return;
    var CCCounter=0;
    var cp=0;
    for(pinID=1; pinID < (nowtotal-1); pinID++)
    {
        cp=parseInt(nowPushTrack[CCCounter])-1;
        if((cp==0)||(cp==(nowtotal-1)))  
            CCCounter++;
        if(pinID==cp)
        {
            map.addOverlay(createMarker(pinID,iconpush,"(Push LOG Point)"));
            CCCounter++;
        }  
        
        if(CCCounter > nowPushTrack.length)
            return;
    }  
}
function createMarker(number,icon,strDesc)
{
    var marker = new GMarker(track_polyline[number],icon);
    GEvent.addListener(marker, "click", function(overlay, point) {
        marker.openInfoWindowHtml("<p align=\"left\">"+strDesc+"<br>Latitude: "+track_polyline[number].lat()+"<br>Longitude: "+track_polyline[number].lng()+"<br>Time: "+nowTime[number]+"<br></p>");});
    return marker;
}         
function MakePhotoMark(number)
{
    var tabtype=0;
    var iconphoto = new GIcon();
    var tabimg=null;   
    var tabdes=null;
    var tabhtm=null;
    iconphoto.iconSize = new GSize(32, 32);
    iconphoto.iconAnchor = new GPoint(16, 16);
    iconphoto.infoWindowAnchor = new GPoint(16, 16);
    if(imgs[number]=="")
    {
        iconphoto.image = "http://gps.wintec.tw/img/movies.png";
    }
    else
    {
        var tabimglinker;
        iconphoto.image=imgs[number];
        tabtype=1;
        if(imglinkers[number]!="")                                           
            tabimglinker=imglinkers[number];                                     
        else
            tabimglinker=imgs[number];
        
        if((imgsw[number]==0) || (imgsh[number]==0))
            tabimg="<a target='_blank' href="+ tabimglinker +">"+titles[number]+"<hr><img src="+imgs[number]+"> </a><hr>" + photo_location[number]+"<hr>"; 
        else            
            tabimg="<a target='_blank' href="+ tabimglinker +">"+titles[number]+"<hr><img src="+imgs[number]+" width="+imgsw[number]+ " height="+imgsh[number]+ "> </a><hr>" + photo_location[number]+"<hr>";
        
    }
    
    if(dess[number]!="")
    {
        tabdes="<div>"+dess[number]+"</div><hr>";
        tabtype+=2;           
    }
    
    if(htmls[number]!='')
    {         
        tabhtm="<div>"+htmls[number]+"</div><hr>";//htmls[number];
        tabtype+=4;                      
    }
    
    var marker = new GMarker(photo_location[number],{icon:iconphoto, draggable: false});
    GEvent.addListener(marker, 'click', function(overlay, point)
    { 
        photoMarkInfo(marker,tabtype,tabimg,tabdes,tabhtm); 
        if(Run)
        {
            clearTimeout(t2);
            Run = false;
            RunNode.nodeValue="Run";                                  }
    }
                       ); 
    GEvent.addListener(marker, 'dragend', function(overlay, point)
    { 
        photoMarkInfo(marker,tabtype,tabimg,tabdes,tabhtm);
    }); 
    PhotoMark.push(marker);
    return marker;
}
function photoMarkInfo(marker,tabtype,tabimg,tabdes,tabhtm)
{
    if(tabtype==1)       
        marker.openInfoWindowTabsHtml([new GInfoWindowTab("Photo",tabimg)]);
    else if(tabtype==2)         
        marker.openInfoWindowTabsHtml([new GInfoWindowTab("Description",tabdes)]);
    else if(tabtype==3)         
        marker.openInfoWindowTabsHtml([new GInfoWindowTab("Photo",tabimg),new GInfoWindowTab("Description",tabdes)]);
    else if(tabtype==4)         
        marker.openInfoWindowTabsHtml([new GInfoWindowTab("video",tabhtm)]);   
    else if(tabtype==5)         
        marker.openInfoWindowTabsHtml([new GInfoWindowTab("Photo",tabimg),new GInfoWindowTab("video",tabhtm)]); 
    else if(tabtype==6)         
        marker.openInfoWindowTabsHtml([new GInfoWindowTab("video",tabhtm),new GInfoWindowTab("Description",tabdes)]);
    else if(tabtype==7) 
        marker.openInfoWindowTabsHtml([new GInfoWindowTab("Photo",tabimg),new GInfoWindowTab("Description",tabdes),new GInfoWindowTab("video",tabhtm)]);
}
function AddPhotoHtmlToMap()
{         
    if((photo_location==null)||(photo_location.length==0))return;
    var pcount=0;
    for(pcount=0; pcount < (photo_location.length); pcount++)
    {
        map.addOverlay(MakePhotoMark(pcount));
    }
}
function ChangeName()
{                   
    map.clearOverlays();
GDownloadUrl("GM2008-07-14T10-57-27.xml", function(data)
    { 
        var xml = GXml.parse(data); 
        var params = xml.documentElement.getElementsByTagName("param"); 
        for (var i = 0; i < params.length; i++)
        {        
            track_polyline.push(new GLatLng(parseFloat(params[i].getAttribute("lat")),parseFloat(params[i].getAttribute("lng"))));
            nowTime.push(new String(params[i].getAttribute("vv"))); 
            gpsLogs.push(new GPSLog(params[i].getAttribute("lat"), params[i].getAttribute("lng"), params[i].getAttribute("vv")));
        }         
        nowtotal =       params.length;
        var myphotoxml = xml.documentElement.getElementsByTagName("photolink");
        for (var i = 0; i < myphotoxml.length; i++)
        {         
            titles.push(new String(myphotoxml[i].getAttribute("lable")));
            imgs.push(new String(myphotoxml[i].getAttribute("img")));
            imgsw.push(parseInt(myphotoxml[i].getAttribute("imgw")));
            imgsh.push(parseInt(myphotoxml[i].getAttribute("imgh")));
            imglinkers.push(new String(myphotoxml[i].getAttribute("imglinker")));    
            dess.push(new String(myphotoxml[i].getAttribute("des")));
            htmls.push(new String(myphotoxml[i].getAttribute("html")));
            photo_location.push(new GLatLng(parseFloat(myphotoxml[i].getAttribute("lat")),parseFloat(myphotoxml[i].getAttribute("lng"))));
        }
        REFF();   map.setMapType(G_NORMAL_MAP);
    }
                 ); 
        map.setCenter(new GLatLng(24.895195,121.668372), map.getBoundsZoomLevel(map_bound));
} 

var GPSLog = function(lat, lng, vv) 
{
    this.latlng = new GLatLng(parseFloat(lat), parseFloat(lng));
    var arr = vv.split('<br>');
    //this.point    = parseInt(arr[0].replace(/Point/, ''));
    this.date     = new Date(arr[2].substr(0, 10).replace(/-/g, '/') + ' ' + arr[2].substr(11, 8)); //"2008-01-22T16:02:59Z+09:00"
    this.speed    = parseInt(arr[4].replace(/Speed=/, ''));
    this.altitude = parseInt(arr[3].replace(/Altitude=/, ''));
    //this.course   = parseInt(arr[5].replace(/Course=/, ''));
    
    GPSLog.prototype.ToString = function() {
        return '[' + this.point + '] ' + this.date + '(' + this.latlng.lat() + ', ' + this.latlng.lng() + ') ' + this.altitude + 'm ' + this.speed + 'Km/h ' + this.course + '';
    };
}

//]]>
</script>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your 
browser.
To view the map, enable JavaScript by changing your browser options, 
and then try again. </noscript>
<style type="text/css"> 
<!--
body{ margin:0; padding:0;} 
-->
</style>
</head>

<body onload="GetMap();" onunload="GUnload()">

<form name="Myform" method="post" action>
	<div id="myMap" style="position:relative; width:900px; height:1000px">
	</div>
</form>

</body>

</html>
